<template>
    <div>
      <h2>用户反馈表单</h2>
  
      <!-- 姓名输入 -->
      <label for="name">姓名：</label>
      <input id="name" type="text" v-model="feedback.name" placeholder="请输入您的姓名" />
  
      <!-- 反馈类型选择 -->
      <label for="feedback-type">反馈类型：</label>
      <select id="feedback-type" v-model="feedback.type">
        <option value="">请选择反馈类型</option>
        <option value="complaint">投诉</option>
        <option value="suggestion">建议</option>
        <option value="other">其他</option>
      </select>
  
      <!-- 反馈详情 -->
      <label for="details">反馈详情：</label>
      <textarea
        id="details"
        v-model="feedback.details"
        placeholder="请输入您的反馈内容"
        @input="calculateRemainingChars"
      ></textarea>
      <p>剩余字符：{{ remainingChars }}</p>
  
      <!-- 邮件通知 -->
      <p>是否同意接受邮件通知？</p>
      <label>
        <input type="radio" name="email-notify" value="yes" v-model="feedback.emailNotify" /> 是
      </label>
      <label>
        <input type="radio" name="email-notify" value="no" v-model="feedback.emailNotify" /> 否
      </label>
  
      <!-- 提交按钮 -->
      <button @click="submitFeedback">提交反馈</button>
  
      <!-- 提交结果展示 -->
      <div v-if="submitted">
        <h3>反馈详情</h3>
        <p>姓名：{{ feedback.name }}</p>
        <p>反馈类型：{{ feedback.type }}</p>
        <p>反馈内容：{{ feedback.details }}</p>
        <p>是否同意接收通知：{{ feedback.emailNotify }}</p>
        <button @click="resetFeedback">再次反馈</button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  interface Feedback {
    name: string;
    type: string;
    details: string;
    emailNotify: string;
  }
  const feedback = ref<Feedback>({
    name: '',
    type: '',
    details: '',
    emailNotify: 'no'
  });
  
  const remainingChars = ref(100);
  
  const calculateRemainingChars = () => {
    remainingChars.value = 100 - feedback.value.details.length;
  };
  
  const submitted = ref(false);
  
  const submitFeedback = () => {
    console.log(feedback.value);
    submitted.value = true;
  };
  
  const resetFeedback = () => {
    feedback.value = {
      name: '',
      type: '',
      details: '',
      emailNotify: 'no'
    };
    remainingChars.value = 100;
    submitted.value = false;
  };
  </script>
  
  <style scoped>
  div {
    margin-bottom: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
  }
  
  input[type='text'],
  select,
  textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  textarea {
    height: 100px;
    resize: none;
  }
  
  button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
  }
  
  button:hover {
    background-color: #218838;
  }
  
  p {
    margin-top: 0;
  }
  
  h3 {
    margin-top: 20px;
  }
  
  input[type='radio'] {
    margin-right: 5px;
  }
  
  .feedback-result {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
  }
  </style>